<template>
	<view class="bg_box">
		
		
		 <view class="acticities-item" v-for="(item,itemIndex) in tabsLists" :key="itemIndex" @click="itemClick(item)">
		 	<view class="content_item"> 
		 		<view class="content-right">
		 			<view class="item-title">
		 				<span>
							练习地点：{{item.ground_name}}
		 				</span>
		 				<span style="color: red;">
		 					<!-- {{item.status==0?'练习中':item.status+"小时"}} -->
							
							{{itemIndex==0?"练习中":"1小时"}}
		 				</span>
		 			</view> 
		 			<view class="item-uptatetime">
		 				<span class="price-dw">练习线路：</span>
		 				{{item.line_name}}
		 			</view>
		 			<view class="item-uptatetime">
		 				<span class="price-dw">练习点位：</span>
		 				{{item.point_name}}
		 			</view>
		 			<view class="item-uptatetime">
		 				<span class="price-dw">练习时间：</span>
		 				<!-- {{item.upload_time}} -->
						<span v-if="itemIndex==0">2024-06-15 15:20:10</span>
						<span v-if="itemIndex==1">2024-06-14 15:02:20</span>
						<span v-if="itemIndex==2">2024-06-13 15:03:15</span>
						<span v-if="itemIndex==3">2024-06-12 15:01:16</span>
		 			</view>
		 			<view class="item-uptatetime">
		 				<span class="price-dw">教学内容：</span>
		 				{{item.content}}
		 			</view>
		 			<view class="item-uptatetime">
		 				<span class="price-dw">练习成绩：</span>
		 				{{item.reason}}
		 			</view>
		 			<!-- <view class="item-uptatetime">
		 				<span class="price-dw">练习设备：</span>
		 				{{item.equipment}}
		 			</view>
		 			<view class="item-uptatetime">
		 				<span class="price-dw">陪练教练：</span>
						{{item.coach}}
		 			</view> -->
		 		</view>
		 	</view>
		 </view>
		 <view v-if="tabsLists.length==0" style="text-align: center; padding-top: 50px;">
		 	暂无数据
		 </view>
		 
		 <view class="bottom_Val">
		 	<span>截止：{{bottomVal.Deadline}}</span>
		 	<span>累计练车/学时：{{bottomVal.cartraining}}</span>
		 </view>
	</view>


</template>

<script>
	import {
		getachievement
	} from '@/common/api/index.js'
	
	
	export default {
		data() {
			return {
				tabsLists: [{
						upload_time:"06-01 10:00  至  06-01 12:00 ", //练习时间
						pay_time: "2024-06-01 07:00:00",//支付时间
						practicelocation:"**考场**路线",//练习地点
						equipment:"***设备", //练习设备
						coach:"***教练", //陪练教练
						status:0,  //状态 
					}, {
						upload_time:"06-01 10:00  至  06-01 12:00 ", //练习时间
						pay_time: "2024-06-01 07:00:00",//支付时间
						practicelocation:"**考场**路线",//练习地点
						equipment:"***设备", //练习设备
						coach:"***教练", //陪练教练
						status:1,  //状态 
					}, 
				],
				bottomVal:{
					Deadline:'',
					cartraining:'6次/8小时'
				}
			}
		},
		onShow() {
			this.getData()
			this.getDateFormat()
		},
		methods: {
			getData() {
				getachievement().then((res=>{
					console.log(res,'resssss');
					if(res.status==0){
						this.tabsLists=[]
						res.data.forEach(i=>{
							this.tabsLists.push(i);
							this.tabsLists.push(i);
							this.tabsLists.push(i);
							this.tabsLists.push(i);
						})
					}else{
						showTishi(res.msg)
					}
				}))
	
			},
			getDateFormat(){
				let now = new Date();
				let year = now.getFullYear(); // 年份
				let month = String(now.getMonth() + 1).padStart(2, '0'); // 月份
				let day = String(now.getDate()).padStart(2, '0'); // 日期
				let hour = String(now.getHours()).padStart(2, '0'); // 小时
				let minute = String(now.getMinutes()).padStart(2, '0'); // 分钟
				let second = String(now.getSeconds()).padStart(2, '0'); // 秒钟
				this.bottomVal.Deadline = `${year}-${month}-${day} ${hour}:${minute}:${second}`;
			}
		}
	}
</script>

<style>
	.acticities-item {
		margin-bottom: 20px;
		border: 1px solid #888;
		border-radius: 5px;
		padding: 5px;
		margin: 5px;
		.content_item{
			display: flex;
			align-items: center;
			
		} 
		.video-img {
			width: 100px;
			height: 85px;
			margin-right: 10px;
		}
	
		.content-right {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
	
			.item-title {
				font-size: 12px;
				display: flex;
				justify-content: space-between;
			}
	
			.item-uptatetime {
				font-size: 12px;
				color: #888;
				margin-top: 15rpx;
			}
	
			.item-price {
				font-size: 20px;
				color: #ff0000;
				margin-top: 20rpx;
			}
			.item-payunm {
				font-size: 14px;
				color: #888;
				margin-top: 10rpx;
			}
			.item_bottom{
				display: flex;
				justify-content: flex-end;
				view{
					font-size: 12px;
					color: blue;
					border: 1px solid blue;
					border-radius: 10px;
					padding: 0px 10px ;
				}
			}
		}
	}
	.bottom_Val{
		color: #FF6E2B;
		display: flex;
		justify-content: space-between;
		position: absolute;
		bottom: 0;
		height: 40px;
		line-height: 40px;
		border: 1px solid;
		width: 100%;
		padding: 0px 5px;
	}
</style>